<!doctype html>
<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <script src="../../../components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../../components/polymer/polymer.html">

    <link rel="import" href="../../../components/paper-input/paper-input.html">
    <link rel="import" href="../../../components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="../../../components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="../../../components/iron-icons/iron-icons.html">
    <link rel="import" href="../../../components/paper-fab/paper-fab.html">
    <link rel="import" href="../timeline-range-input.html">
    <link rel="import" href="../timeline-tree-view.html">

    <link rel="import" href="webrtc-internals-loader.html">
  </head>
  <body class="fullbleed">
    <dom-module id="webrtc-internals-demo">
      <style>
        .paper-header {
          background-color: #9E9;
          padding: 0 2em 2em 2em;
        }
        .title {
          display: none;
        }
        .paper-header.tall .title, .controls {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .controls paper-input {
          min-width: 200px;
        }
        .content {
          padding: 0 0 0 2em;
        }
        timeline-range-input {
          flex-grow: 1;
        }
      </style>
      <template>
        <webrtc-internals-loader id="model" records="{{records}}" src="webrtc_internals_demo_dump.txt"></webrtc-internals-loader>
        <paper-header-panel mode="waterfall-tall">
          <div class="paper-header">
            <div class="title">
              <h1>WebRTC-Internals Viewer</h1>
              <paper-fab icon="file-upload" on-tap="_selectFile"></paper-fab>
              <input hidden id="file" type="file" on-change="_fileSelected"></input>
            </div>
            <div class="controls">
              <paper-input label="Filter expression" value="{{filterRegex}}"></paper-input>
              <timeline-range-input class="range" records="[[records]]" begin="{{begin}}" end="{{end}}"></timeline-range-input>
            </div>
          </div>
          <div class="fit content">
            <timeline-tree-view records="[[records]]" begin="[[begin]]" end="[[end]]" filter-regex="[[filterRegex]]"></timeline-tree-view>
          </div>
        </paper-header-panel>
      </template>
      <script>
        Polymer({
          is: 'webrtc-internals-demo',
          properties: {
            filterRegex: {
              value: "",
            }
          },
          _selectFile: function() {
            this.$.file.click();
          },
          _fileSelected(e) {
            var file = this.$.file.files[0];
            window.URL.revokeObjectURL(this.$.model.src);
            this.$.model.src = window.URL.createObjectURL(file);
          },
        });
      </script>
    </dom-module>
    <webrtc-internals-demo></webrtc-internals-demo>
  </body>
</html>
